<template>
  <full-page :options="options" id="fullpage" ref="fullpage">
    <div class="section section1">
      <div class="wrap">
        <div class="layout">
          <div class="school-content">
            <div class="c-left _wow animated fadeInLeft">
              <img src="../../assets/img/iart.png" alt="" />
              <p>北京外国语大学国际商学院商学+艺术国际项目</p>
              <div class="school">
                <span>IART Program at International Business School</span>
                <span>Beijing Foreign Studies University</span>
              </div>
            </div>
            <div class="c-right _wow animated fadeInRight">
              <div>
                <p>用艺术的笔触</p>
                <p>书写商业的世界</p>
                <p>创造不一样的自己</p>
              </div>
              <div class="en">
                Creativity StARTS in International Business School To Foster
                Creative Entrepreneurs
              </div>
            </div>
            <img src="../../assets/img/chenyu.png" alt="" class="chenyu _wow animated fadeInRight" />
          </div>
        </div>
        <footer>
          <div class="bar _wow">
            <img src="../../assets/img/down.png" alt="" class="_wow animated bounce" data-wow-iteration="infinite" @click="moveTo" />
          </div>
        </footer>
      </div>
    </div>
    <div class="section section2">
      <div class="introduction-layout">
        <div class="introduction-title">
          <img src="../../assets/img/introduction.png" alt="" class="introduction" />
        </div>
      </div>

      <div class="layout">
        <div class="bfsu-img">
          <div class="img-box">
            <img src="../../assets/img/bfsu.png" alt="" />
            <div class="fill"></div>
          </div>
        </div>
        <div class="introduction-content">
          <div class="school-overview _wow animated fadeInDown">
            <h1>学校简介</h1>
            <div class="bfsu-intro">
              <div class="title">
                <p>北京外国语大学</p>
                <p>Beijing Foreign Studies University</p>
              </div>

              <a class="learn-more" @click="getDetail('/information','1','1-1','bfsu')">Learn more <img src="../../assets/img/toRight-w.png" alt="" /></a>
            </div>
          </div>

          <div class="business-overview _wow animated fadeInDown">
            <div class="bfsu-intro">
              <div class="title">
                <p>国际商学院</p>
                <p>International Business School</p>
              </div>

              <a class="learn-more" @click="getDetail('/information','1','1-2','ibs')">Learn more <img src="../../assets/img/toRight-b.png" alt="" /></a>
            </div>
          </div>
          <ul class="business-num _wow animated fadeInDown">
            <li><span>统招本硕博</span><span>1300+</span></li>
            <li><span>来华留学生</span><span>400+</span></li>
            <li><span>出国留学生</span><span>600+</span></li>
            <li><span>出国留学项目办学历史</span><span>23years</span></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="section section3">
      <div class="layout">
        <div class="project-box">
          <img src="../../assets/img/project.png" alt="" />
          <div class="title">
            <h2>项目概况</h2>
            <a href="#">Learn more <img src="../../assets/img/toRight-b.png" alt="" /></a>
          </div>
        </div>
        <div class="pro-list">
          <div class="pro pro-1 ">
            <div class="img-box">
              <img src="../../assets/img/pro-1.png" alt="" />
            </div>

            <div class="des">
              <h1>
                <span>商学+艺术 </span> 1+3预科项目
              </h1>
              <div class="btns">
                <span>招生简章<em class="iconfont icon-youceshuangjiantou"></em></span> <span @click="getDetail('/major','4','4-2')">专业设置<em class="iconfont icon-youceshuangjiantou"></em></span>
              </div>
            </div>
          </div>

          <div class="pro pro-2">
            <div class="img-box">

              <img src="../../assets/img/pro-2.png" alt="" />
            </div>

            <div class="des">
              <h1>
                冬夏令营项目
              </h1>
              <div class="btns">
                <span>内容详情<em class="iconfont icon-youceshuangjiantou"></em></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section section4">
      <div class="system-top">
        <div class="layout">
          <h1>培养体系</h1>
          <img src="../../assets/img/system.png" alt="" />
        </div>
      </div>
      <div class="system-bottom">
        <div class="layout">
          <div class="system-list">
            <div class="item item1">
              <div class="origin">
                <img src="../../assets/img/system01.png" alt="" />
                <div>
                  <p>学科教学体系</p>
                  <span>交叉型</span>
                </div>
              </div>
              <div class="active animated flipInX">
                <h3>学科教学体系</h3>
                <p>
                  艺术、管理、科技、传媒等专业相融合
                </p>
              </div>
            </div>
            <div class="item item2">
              <div class="origin">
                <img src="../../assets/img/system02.png" alt="" />
                <div>
                  <p>语言培养体系</p>
                  <span>复合型</span>
                </div>
              </div>
              <div class="active animated flipInX">
                <h3>语言培养体系</h3>
                <p>
                  英语为主，其余语种为辅
                </p>
              </div>
            </div>
            <div class="item item3">
              <div class="origin">
                <img src="../../assets/img/system03.png" alt="" />
                <div>
                  <p>项目生态体系</p>
                  <span>一体化</span>
                </div>
              </div>
              <div class="active animated flipInX">
                <h3>项目生态体系</h3>
                <p>
                  专业课教学 + 英语教学 + 雅思培训 + 艺术作品集培训 + 留学申请 + 签证服务
                </p>
              </div>
            </div>
            <div class="item item4">
              <div class="origin">
                <img src="../../assets/img/system04.png" alt="" />
                <div>
                  <p>学生管理体系</p>
                  <span>全天候</span>
                </div>
              </div>
              <div class="active animated flipInX">
                <h3>学生管理体系</h3>
                <p>
                  24 小时全天制管理、一周六天制教学
                </p>
              </div>
            </div>
          </div>
          <span class="todetail" @click="getDetail('/overview','4','4-1')">
            Learn more
            <img src="../../assets/img/toRight-w.png" alt="" />
          </span>
        </div>
      </div>
    </div>
    <div class="section section5">
      <div class="teacher-bg"></div>
      <div class="layout">
        <img src="../../assets/img/team.png" alt="" />
        <div class="team-cont">
          <div class="title">
            <h2>师资团队</h2>
            <a href="#">Learn more <img src="../../assets/img/toRight-b.png" alt="" /></a>
          </div>
          <p>
            核心学科师资均具备国内外双轨制的学习经历，深刻理解国内外教学差异性，了解国际化教育的前沿发展趋势。诚邀世界各地名校专家及产业大咖来华交流，建立起强大的海外专家学术指导联盟，每年定期举办院校讲座和学术沙龙等活动。
          </p>
        </div>
      </div>
    </div>
    <div class="section section6">
      <div class="layout">
        <div class="layout1">
          <h1>对接大学</h1>
          <img src="../../assets/img/map.png" alt="" />
          <span class="todetail">
            Learn more
            <img src="../../assets/img/toRight-b.png" alt="" />
          </span>
        </div>
      </div>
    </div>
    <div class="section section7" v-if="worksList1.length">
      <div class="works-exhibition">
        <div class="multiple-swiper" ref="listRef1">
        <img v-for="(item,index) in worksList1"  :src="item" :key="index"/>
        </div>
        <div class="multiple-swiper" ref="listRef2">
          <img v-for="(item,index) in worksList2"  :src="item" :key="index"/>
        </div>
      </div>

      <div class="mask">
        <div class="layout">
          <img src="../../assets/img/works.png" alt="" class="works" />
          <div class="des">
            <p>
              <span> 作品展示 </span>
              <span>Learn more<img src="../../assets/img/toRight-w.png" alt="" /></span>
            </p>
            <img src="../../assets/img/collection.png" alt="" class="collection" />
          </div>
        </div>
      </div>
    </div>
    <div class="section section8" v-if="storyList&&storyList.length">
      <div class="layout">
        <div class="students-imgs">
          <swiper :modules="modules" @swiper="onSwiper" @slideChange="onSlideChange" navigation>
            <swiper-slide v-for="item in storyList" :key="item.id">
              <img :src="item.imageUrl" />
            </swiper-slide>
          </swiper>
        </div>
        <div class="students-des">
          <div class="title">
            <img src="../../assets/img/story.png" alt="" />
            <div class="title-chinese">
              <h1>校友故事</h1>
              <span class="todetail">Learn more
                <img src="../../assets/img/toRight-b.png" alt="" />
              </span>
            </div>
          </div>
          <div class="student-name">
            <h1>{{storyList[activeIndex].name}}</h1>
            <p>{{storyList[activeIndex].admittedSchool}}</p>
          </div>
        </div>
        <div class="student-content">
          <div>
            <label>专 业：</label>
            <p>{{storyList[activeIndex].major}}</p>
          </div>
          <div>
            <label>学术背景：</label>
            <p>{{storyList[activeIndex].background}}</p>
          </div>
          <div>
            <label>学习感受：</label>
            <p>
              {{storyList[activeIndex].feeling}} </p>
          </div>
        </div>
      </div>
    </div>
    <div class="section section9">
      <div class="layout">
        <span class="title">Activities</span>
        <div class="information-content">
          <div class="title">
            <h1>活动资讯</h1>
            <span>
              Learn more
              <img src="../../assets/img/toRight-b.png" alt="" />
            </span>
          </div>
          <ul class="information-list">
            <li>
              <div class="img-box">
                <img src="../../assets/img/information01.png" alt="" />
              </div>

              <p>
                汇众合力
                同耀新辉｜北外国商与北外教育培训中心国际留学预科项目签约仪式成功举办
              </p>
            </li>
            <li>
              <div class="img-box">
                <img src="../../assets/img/information02.png" alt="" />
              </div>
              <p>
                汇众合力
                同耀新辉｜北外国商与北外教育培训中心国际留学预科项目签约仪式成功举办
              </p>
            </li>
            <li>
              <div class="img-box">
                <img src="../../assets/img/information03.png" alt="" />
              </div>
              <p>
                汇众合力
                同耀新辉｜北外国商与北外教育培训中心国际留学预科项目签约仪式成功举办
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <Footer />
  </full-page>
</template>

<script>
import {
  toRefs,
  getCurrentInstance,
  reactive,
  onMounted,
  ref,
  shallowRef
} from "vue";
import anime1 from "animejs/lib/anime.es.js";
import anime from "animejs/lib/anime.es.js";
// import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation } from "swiper/modules";
import Footer from "../../components/pcFooter/footer.vue";

import "swiper/css";
import "swiper/css/navigation";
import WOW from "wow.js";
export default {
  name: "Index",
  components: {
    Swiper,
    SwiperSlide,
    Footer
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    let listRef1 = ref();
    let listRef2 = ref();
    var animation1 = shallowRef(null);
    var animation2 = shallowRef(null);
    var spacing = 0;
    const wowjsFn = () => {
      let wow = new WOW({
        boxClass: "_wow", // animated element css class (default is wow)
        animateClass: "animated", // animation css class (default is animated)
        offset: 0, // distance to the element when triggering the animation (default is 0)
        mobile: true, // trigger animations on mobile devices (default is true)
        live: true, // act on asynchronously loaded content (default is true)
        callback: function (box) {
          // the callback is fired every time an animation is started
          // the argument that is passed in is the DOM node being animated
        },
        scrollContainer: null // optional scroll container selector, otherwise use window
      });
      wow.init();
    };

    const init = () => {
      const children = listRef1.value?.children || [];

      //如果没有实例作拦截
      if (!children.length) return;

      // 获取列表集合中第一个元素宽，通过宽和元素之间的间距计算出移动距离firstDiff
      const firstEl = children[0];
      const firstDiff = firstEl.offsetWidth + spacing;

      // 默认将list元素向左移动一个item的距离
      listRef1.value.style.transform = `translateX(-${firstDiff}px)`;

      const transList = [];
      let total = 0; //声明总宽
      // 设置初始位置
      anime.set(children, {
        ["translateX"]: (el, i) => {
          //计算得出总宽
          const distance = el.offsetWidth + spacing;
          total += distance;
          //设置初始运动点为0
          const diff = (i + 1) * distance;
          //收集所有小模块运动x轴点值
          transList[i] = { ["x"]: diff };
          return diff;
        }
      });
      // 设置list容器的宽或高
      listRef1.value.style["width"] = total + "px";

      // 添加动画
      animation1.value = anime({
        targets: transList,
        duration: 12000, //一个动画时间
        easing: "linear",
        direction: "horizontal",
        ["x"]: `+=${total}`,
        loop: true, //是否循环
        autoplay: true,
        update: () => {
          anime.set(children, {
            ["translateX"]: (_el, i) => {
              return transList[i]["x"] % total;
            }
          });
        }
      });

      const children2 = listRef2.value?.children || [];

      //如果没有实例作拦截
      if (!children2.length) return;

      // 获取列表集合中第一个元素宽，通过宽和元素之间的间距计算出移动距离firstDiff
      const firstEl2 = children2[0];
      const firstDiff2 = firstEl2.offsetWidth + spacing;

      // 默认将list元素向左移动一个item的距离
      listRef2.value.style.transform = `translateX(-${firstDiff2}px)`;

      const transList2 = [];
      let total2 = 0; //声明总宽
      // 设置初始位置
      anime1.set(children2, {
        ["translateX"]: (el, i) => {
          //计算得出总宽
          const distance = el.offsetWidth + spacing;
          total2 += distance;
          //设置初始运动点为0
          const diff = (i + 1) * distance;
          //收集所有小模块运动x轴点值
          transList2[i] = { ["x"]: diff };
          return diff;
        }
      });
      // 设置list容器的宽或高
      listRef2.value.style["width"] = total2 + "px";
      // 添加动画
      animation2.value = anime1({
        targets: transList2,
        duration: 12000, //一个动画时间
        easing: "linear",
        direction: "reverse",
        ["x"]: `+=${total2}`,
        loop: true, //是否循环
        autoplay: true,
        update: () => {
          anime1.set(children2, {
            ["translateX"]: (_el, i) => {
              return transList2[i]["x"] % total2;
            }
          });
        }
      });
    };

    let dataObj = reactive({
      listRef1,
      listRef2,
      options: {
        credits: {},
        scrollOverflow: false,
        scrollBar: true
      },
      storyList: [], //校友故事
      activeIndex: 0, //校友故事active
   
      worksList1: [],
      worksList2:[]
    });
    const getStudentStoryList = () => {
      proxy.$https
        .get("/api/admin/prod-api/art/student/story/list", {
          pageNum: 5
        })
        .then((res) => {
          if (res.code === 200) {
            dataObj.storyList = res.rows;
          }
        });
    };
    const getStudentWorksList = () => {
      proxy.$https
        .get("/api/admin/prod-api/art/student/work/listImages")
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
         
            dataObj.halfIndex = Math.floor(res.data.length / 2);
            dataObj.worksList1 = res.data.slice(0,halfIndex);
            dataObj.worksList2 = res.data.slice(halfIndex);
          }
        });
    };
    onMounted(() => {
      getStudentStoryList();
      getStudentWorksList();
      init();
      wowjsFn();
      // getStudentStoryList();
    });
    const onSwiper = (swiper) => {
      // dataObj.activeIndex=swiper.activeIndex
      console.log(swiper);
    };
    const onSlideChange = (val) => {
      dataObj.activeIndex = val.activeIndex;
      console.log(val);
    };
    let moveTo = (pages) => {
      proxy.$refs.fullpage.api.moveSectionDown(); // 输出DOM元素
    };
    let getDetail = (path, preActiveId, activeId, urlName) => {
      if (path === "/information") {
        router.push({ path: path, query: { urlName, preActiveId, activeId } });
      } else {
        router.push({ path: path });
      }
      window.localStorage.setItem("preActiveId", preActiveId);
      window.localStorage.setItem("activeId", activeId);
    };
    let methods = {
      moveTo,
      onSwiper,
      onSlideChange,
      getDetail
    };
    return {
      ...toRefs(dataObj),
      ...methods,
      modules: [Navigation]
    };
  }
};
</script>
<style scoped lang="scss">
@font-face {
  font-family: "font-one";
  src: url("../../assets/Morganite-Black-2.ttf");
}
.section1 {
  .wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url(../../assets/img/bg-1.png) no-repeat center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 64px;
    .layout {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .school-content {
      width: 1350px;

      flex: 1;
      // height: 534px);
      // height:calc(100% - 300px));
      position: relative;
      bottom: 0;
      // position: relative;
      // bottom: 0;

      // flex: 1;

      margin: 30px auto 0;

      // background: url(../../assets/img/chenyu.png) no-repeat right center;
      // background-size: 534px)  669px)  ;
      display: flex;
      // align-items: center;
      .c-left {
        padding-top: 75px;
        // height: 5rem;
        // width: 3.56rem;
        width: 621px;

        display: flex;
        flex-direction: column;
        img {
          width: 621px;
          // height: 460px;
          // height: 3rem;
          display: block;
        }
        .school {
          margin-top: 15px;
          span {
            // width: 570px;
            display: block;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 20px;
            color: rgba(255, 107, 25, 0.6);
            line-height: 36px;
            text-align: left;
            font-style: normal;
          }
        }
        p {
          font-family: "WenQuanYi Micro Hei";
          font-weight: normal;
          font-size: 48px;
          color: #ff6b19;
          line-height: 50px;
          text-align: left;
          font-style: normal;
          margin-top: 39px;
        }
      }
      .c-right {
        padding-top: 280px;
        margin-left: -15px;
        // margin-left: 0.1rem;
        color: rgba(2225, 225, 225, 0.6);
        display: flex;
        flex-direction: column;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        text-align: left;
        font-style: normal;
        // p {
        //   width: 200px);
        // }
        .en {
          width: 200px;
          color: rgba(2225, 225, 225, 0.6);
          margin-top: 50px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          line-height: 30px;
          text-align: left;
          font-style: normal;
        }
      }
      .chenyu {
        width: 654px;
        // height: 729px);
        height: 819px;
        // height: 100%;
        justify-content: flex-end;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        // min-height: 3rem;
        // z-index:8;
      }
    }
    footer {
      position: relative;
      z-index: 999;
      width: 100%;
      // height: 100px;
      flex: 1;
      display: flex;
      justify-content: flex-end;
      .bar {
        padding-top: 35px;
        width: 70%;
        height: 100%;
        background: #ff6b19;
        //   display: flex;
        //   align-items: center;
        padding-left: 30px;
        img {
          width: 30px;
          display: block;
          cursor: pointer;
        }
      }
    }
  }
}
.section2 {
  overflow: hidden;

  .introduction-layout {
    width: 100%;

    height: 683px;

    position: relative;
    .introduction-title {
      width: 70%;
      height: 683px;

      background: #ff6b19;
      position: absolute;
      right: 0;

      padding-top: 149px;
      display: flex;
      flex-direction: column;
      .introduction {
        width: 887px;
        margin-left: 49px;
        display: block;
      }
    }
  }

  .layout {
    width: 1200px;
    height: 440px;
    margin: 0 auto;
    position: relative;
    top: -202px;
    display: flex;

    .bfsu-img {
      width: 636px;
      height: 440px;

      .img-box {
        width: 636px;
        height: 410px;
        background: rgba(255, 107, 25, 0.6) no-repeat left top;
        background-size: 264px 502px;
        background-position: left top;
        position: relative;
        img {
          position: absolute;
          top: 30px;
          left: 30px;
          width: 606px;
          height: 410px;
          display: block;
        }
      }
    }
    .introduction-content {
      padding-top: 30px;
      height: 100%;
      padding-left: 47px;
      flex: 1;
      .school-overview {
        width: 100%;
        height: 202px;
        h1 {
          font-family: HarmonyOS_Sans_SC_Black;
          font-size: 40px;
          color: #ffffff;
          line-height: 56px;
          text-align: left;
          font-style: normal;
        }
        .bfsu-intro {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20px;
          .title {
            p:first-child {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 16px;
              color: #ffffff;
              line-height: 28px;
              text-align: left;
              font-style: normal;
            }
            p:last-child {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 16px;
              color: #ffffff;
              line-height: 28px;
              text-align: left;
              font-style: normal;
            }
          }
          .learn-more {
            width: 140px;
            height: 32px;
            border: 1px solid #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;

            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            cursor: pointer;

            img {
              width: 12px;
              height: 12px;
              margin-left: 10px;
            }
          }
        }
      }
      .business-overview {
        .bfsu-intro {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20px;
          .title {
            p:first-child {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 16px;
              color: #2a2a2a;
              line-height: 28px;
              text-align: left;
              font-style: normal;
            }
            p:last-child {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 16px;
              color: #2a2a2a;
              line-height: 28px;
              text-align: left;
              font-style: normal;
            }
          }
          .learn-more {
            width: 140px;
            height: 32px;
            border: 1px solid #2a2a2a;
            display: flex;
            align-items: center;
            justify-content: center;

            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #2a2a2a;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            cursor: pointer;
            img {
              width: 12px;
              height: 12px;
              margin-left: 10px;
            }
          }
        }
      }
      .business-num {
        display: flex;
        margin-top: 50px;
        width: 100%;
        li {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin: 0 12px;
          // flex: 1;
          text-align: center;
          span:first-child {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #2a2a2a;
            line-height: 22px;
            text-align: left;
            font-style: normal;
          }
          span:last-child {
            font-family: Oswald, Oswald;
            font-weight: 500;
            font-size: 30px;
            color: #2a2a2a;
            line-height: 60px;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
  }
}
.section3 {
  width: 100%;
  background: url(../../assets/img/bg-3.png) no-repeat center center;
  background-size: cover;
  padding-top: 80px;
  .layout {
    width: 1200px;
    margin: 0 auto;
    .project-box {
      display: flex;
      align-items: flex-end;
      img {
        width: 538px;
        height: 329px;
        display: block;
      }
      .title {
        margin-bottom: 56px;
        display: flex;
        align-items: flex-end;
        margin-left: 33px;
        h2 {
          font-family: HarmonyOS_Sans_SC_Black;
          font-size: 40px;
          color: #2a2a2a;
          line-height: 56px;
          text-align: left;
          font-style: normal;
        }
        a {
          margin-left: 30px;
          display: flex;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #2a2a2a;
          line-height: 25px;
          text-align: left;
          font-style: normal;
          align-items: center;
          img {
            width: 10px;
            height: 10px;
            margin-left: 11px;
          }
        }
      }
    }
    .pro-list {
      display: flex;
      justify-content: space-between;
      margin-top: 40px;
      .pro {
        width: 585px;
        .img-box {
          width: 100%;
          overflow: hidden;
          > img {
            width: 100%;
            display: block;
            transition: transform 0.3s ease; /* 平滑的变换效果 */
            transform: scale(1);
          }
        }

        .des {
          width: 100%;
          height: 170px;
          background: #ffffff;
          padding: 30px 40px;
          h1 {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 30px;
            color: #2a2a2a;
            line-height: 42px;
            text-align: left;
            font-style: normal;
            margin-bottom: 20px;
            span {
              color: #ff6b19;
            }
          }
          .btns {
            width: 100%;
            display: flex;
            height: 48px;
            span {
              flex: 1;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 20px;
              color: #2a2a2a;
              line-height: 28px;
              text-align: left;
              font-style: normal;
              display: flex;
              align-items: center;
              justify-content: center;
              border: 1px solid #2a2a2a;
              cursor: pointer;
              em {
                font-style: normal;
                font-size: 10px;
                color: #2a2a2a;
                margin-left: 11px;
              }
            }
          }
        }
      }
      .pro-1 {
        .des {
          .btns {
            span:first-child {
              margin-right: 15px;
            }
          }
        }
      }
      .pro:hover {
        img {
          transform: scale(1.1); /* 鼠标划过时放大1.1倍 */
        }
        .des {
          background: #ff6b19;
          h1 {
            color: #ffffff;
            span {
              color: #ffffff;
            }
          }
          .btns {
            span {
              background: rgba(255, 255, 255, 0.2);
              border: 1px solid #ffffff;
              color: #ffffff;
              em {
                color: #ffffff;
              }
            }
          }
        }
      }
      // .pro-1 {
      //   width: 380px;
      //   .des {
      //     img {
      //       width: 148px;
      //       display: block;
      //       margin-top: 39px;
      //     }
      //   }
      // }
      // .pro-1,
      // .pro-3 {
      //   .des {
      //     img {
      //       margin-top: 39px;
      //       // display: block;
      //       height: 62px;
      //     }
      //   }
      // }
      // .pro:hover {
      //   .des {
      //     img {
      //       display: none;
      //     }
      //     .cont {
      //       display: block !important;
      //       width: 100%;
      //       height: 100%;
      //       background: #ff6b19;
      //       padding-left: 30px;
      //       padding-top: 27px;
      //       p {
      //         font-family: HarmonyOS_Sans_SC_Bold;
      //         font-size: 20px;
      //         color: #ffffff;
      //         line-height: 29px;
      //         text-align: left;
      //         font-style: normal;
      //       }
      //       span {
      //         font-family: PingFangSC, PingFang SC;
      //         font-weight: 400;
      //         font-size: 20px;
      //         color: #ffffff;
      //         line-height: 28px;
      //         text-align: left;
      //         font-style: normal;
      //         margin-top: 10px;
      //       }
      //     }
      //   }
      // }

      // .pro-2 {
      //   .des {
      //     img {
      //       width: 203px;
      //       height: 62px;
      //       // display: block;
      //       margin-top: 19px;
      //     }
      //   }
      // }
      // .pro-2,
      // .pro-3 {
      //   width: 380px;
      //   .des {
      //     img {
      //       width: 203px;
      //       display: block;
      //     }
      //   }
      // }
    }
  }
}
.section4 {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  .system-top {
    width: 100%;

    flex: 1;
    background: url("../../assets/img/system-bg1.png") no-repeat left top;
    background-size: 729px 477px;
    background-color: linear-gradient(180deg, #f0f0f0 0%, #ffffff 100%);
    .layout {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      h1 {
        font-family: HarmonyOS_Sans_SC_Black;
        font-size: 40px;
        color: #2a2a2a;
        line-height: 56px;
        text-align: left;
        font-style: normal;
        margin-right: 34px;
        margin-bottom: 47px;
      }
      img {
        width: 557px;
        height: 348px;
      }
    }
  }
  .system-bottom {
    width: 100%;
    height: 584px;

    background: url("../../assets/img/system-bg2.png") no-repeat right bottom;
    background-color: #ff6b19;
    background-size: 747px 496px;
    .layout {
      width: 1200px;
      margin: 0 auto;

      .system-list {
        width: 100%;
        height: 318px;
        display: flex;
        margin-top: 63px;
        .item:hover {
          .origin {
            display: none;
          }
          .active {
            display: flex;
          }
        }
        .item {
          flex: 1;
          position: relative;
          .origin {
            display: flex;

            flex-direction: column;
            align-items: center;
            margin-top: 53px;
            img {
              width: 100px;
              height: 100px;
              display: block;
            }
            div {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-top: 60px;
              p {
                font-family: HarmonyOS_Sans_SC_Bold;
                font-size: 26px;
                color: #fff;
                line-height: 36px;
                text-align: left;
                font-style: normal;
              }
              span {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: rgba(225, 225, 225, 0.6);
                line-height: 22px;
                text-align: left;
                font-style: normal;
                margin-top: 12px;
              }
            }
          }
          .active {
            // width: 384px;
            height: 100%;
            background: #ffffff;
            opacity: 0.8;
            backdrop-filter: blur(5px);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px 40px;
            display: none;
            h3 {
              font-family: HarmonyOS_Sans_SC_Bold;
              font-size: 26px;
              color: #2a2a2a;
              line-height: 36px;
              text-align: left;
              font-style: normal;
            }
            p {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 16px;
              color: #2a2a2a;
              line-height: 32px;
              text-align: left;
              font-style: normal;
              margin-top: 30px;
            }
          }
        }
        .item1:before,
        .item2:before,
        .item3:before {
          content: "";
          display: block;
          position: absolute;
          width: 3px;
          height: 200px;
          right: -12px;
          top: 50%;
          margin-top: -100px;
          background: #fff;
        }
        .item2 {
          margin: 0 24px;
        }
        .item3 {
          margin-right: 24px;
        }
      }
      .todetail {
        display: block;
        margin: 40px auto;
        width: 400px;
        height: 50px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 20px;
        color: #fff;
        text-align: left;
        font-style: normal;
        display: flex;
        justify-content: center;
        border: 1px solid #ffffff;
        align-items: center;
        cursor: pointer;
        img {
          width: 10px;
          height: 10px;
          margin-left: 10px;
        }
      }
    }
  }
}
.section5 {
  width: 100%;
  .teacher-bg {
    // width: 100%;
    // display: block;
    width: 100%;
    height: 480px;
    background: url(../../assets/img/teacher-bg.png) no-repeat center center;
    background-size: cover;
  }
  .layout {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    margin-top: 64px;

    > img {
      width: 467px;
      height: 338px;
    }
    .team-cont {
      padding-top: 98px;
      margin-left: 65px;
      .title {
        display: flex;
        align-items: flex-end;

        h2 {
          font-family: HarmonyOS_Sans_SC_Black;
          font-size: 40px;
          color: #2a2a2a;
          line-height: 56px;
          text-align: left;
          font-style: normal;
        }
        a {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #2a2a2a;
          line-height: 25px;
          text-align: left;
          font-style: normal;
          display: flex;
          margin-left: 30px;
          align-items: center;
          img {
            width: 10px;
            height: 10px;
            display: block;
            margin-left: 11px;
          }
        }
      }
      p {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #2a2a2a;
        line-height: 32px;
        text-align: justify;
        font-style: normal;
        margin-top: 60px;
      }
    }
  }
}
.section6 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  .layout {
    width: 100%;
    background: url("../../assets/img/map-bg.png") no-repeat center center;
    background-size: cover;

    .layout1 {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      h1 {
        font-family: HarmonyOS_Sans_SC_Black;
        font-size: 40px;
        color: #2a2a2a;
        line-height: 56px;
        text-align: left;
        font-style: normal;
        margin-bottom: 50px;
      }
      img {
        width: 100%;
        display: block;
      }
      .todetail {
        display: block;
        margin: 25px auto;
        width: 400px;
        height: 50px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 20px;
        color: #2a2a2a;
        text-align: left;
        font-style: normal;
        display: flex;
        justify-content: center;
        border: 1px solid #2a2a2a;
        align-items: center;
        cursor: pointer;

        img {
          width: 10px;
          height: 10px;
          margin-left: 10px;
        }
      }
    }
  }
}
.section7 {
  position: relative;
  .works-exhibition {
    width: 100%;
    height: 100%;
    .multiple-swiper {
      height: 50%;
      width: 100%;
      display: flex;
      position: relative;
      img {
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 409px;
      }
    }
  }

  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    background: linear-gradient(180deg, rgba(23, 23, 23, 0.2) 0%, #171717 100%);
    .layout {
      width: 1200px;

      margin: 0 auto;
      padding-top: 500px;
      display: flex;
      align-items: flex-end;
      .works {
        width: 483px;
        height: 268px;
        display: block;
      }
      .des {
        margin-left: 47px;
        p {
          display: flex;
          span:first-child {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 30px;
            color: #ffffff;
            line-height: 42px;
            letter-spacing: 30px;
            text-align: left;
            font-style: normal;
          }
          span:last-child {
            border: 1px solid #ffffff;
            padding: 4px 16px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            display: flex;
            align-items: center;
            cursor: pointer;
            img {
              width: 10px;
              height: 10px;
              margin-left: 10px;
            }
          }
        }
        .collection {
          margin-top: 27px;
          width: 386px;
          height: 66px;
          display: block;
        }
      }
    }
  }
}
.section8 {
  width: 100%;
  padding: 100px 0;
  display: flex;
  align-items: center;
  .layout {
    width: 1200px;
    height: 800px;
    margin: 0 auto;
    display: flex;
    position: relative;
    .students-imgs {
      // width: 600px;
      height: 800px;
      max-width: 800px;
      // width: 600px;
      // height: 800px;
    }
    .students-des {
      width: 700px;
      height: 525px;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 999;
      .title {
        width: 100%;
        display: flex;
        align-items: flex-end;
        > img {
          width: 406px;
          height: 331px;
          display: block;
        }
        .title-chinese {
          margin-left: 10px;
          margin-bottom: 56px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          h1 {
            font-family: HarmonyOS_Sans_SC_Black;
            font-size: 40px;
            color: #2a2a2a;
            line-height: 56px;
            text-align: left;
            font-style: normal;
          }
          .todetail {
            display: block;
            margin-top: 11px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: #2a2a2a;
            line-height: 25px;
            text-align: left;
            font-style: normal;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            img {
              width: 10px;
              height: 10px;
              margin-left: 10px;
              display: block;
            }
          }
        }
      }
      .student-name {
        width: 100%;
        height: 194px;
        background: #ff6b19;
        padding: 32px 71px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        h1 {
          font-family: HarmonyOS_Sans_SC_Black;
          font-size: 50px;
          color: #ffffff;
          line-height: 70px;
          text-align: left;
          font-style: normal;
        }
        p {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 20px;
          color: #ffffff;
          line-height: 28px;
          text-align: left;
          font-style: normal;
        }
      }
    }
    .student-content {
      width: 550px;
      margin-top: 53px;
      height: calc(100% - 525px);
      position: absolute;
      right: 0;
      bottom: 0;
      div {
        display: flex;
        position: relative;
        margin-top: 20px;
        label {
          width: 80px;
          flex-shrink: 0;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #2a2a2a;
          line-height: 24px;
          text-align: left;
          font-style: normal;
        }
        p {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #2a2a2a;
          line-height: 32px;
          text-align: left;
          font-style: normal;
          margin-left: 20px;
          display: -webkit-box;

          -webkit-box-orient: vertical;

          overflow: hidden;

          -webkit-line-clamp: 4;
        }
      }
      div:before {
        width: 11px;
        height: 11px;

        content: "";
        display: block;
        position: absolute;
        left: -20px;
        top: 5px;
        background: linear-gradient(225deg, #ffa436 0%, #ff6b19 100%);
        box-shadow: -1px 1px 4px 0px rgba(255, 107, 25, 0.5);
        border-radius: 2px;
        transform: rotate(45deg);
      }
    }
  }
}
.section9 {
  width: 100%;
  .layout {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    height: 100%;

    flex-direction: column;
    justify-content: center;
    .title {
      font-family: "font-one";
      font-size: 270px;
      line-height: 240px;
      color: rgba(255, 107, 25, 1);
    }
    // .information {
    //   width: 860px;
    //   height: 271px;
    //   display: block;
    // }
    .information-content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 63px;
      .title {
        display: flex;
        flex-direction: column;
        h1 {
          font-family: HarmonyOS_Sans_SC_Black;
          font-size: 40px;
          color: #2a2a2a;
          line-height: 56px;
          text-align: left;
          font-style: normal;
        }
        span {
          display: flex;
          align-items: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #2a2a2a;
          line-height: 25px;
          text-align: left;
          font-style: normal;
          margin-top: 10px;
          img {
            width: 10px;
            height: 10px;
            display: block;
            margin-left: 10px;
          }
        }
      }
      .information-list {
        display: flex;
        flex: 1;
        margin-left: 170px;
        justify-content: space-between;
        li {
          width: 270px;
          .img-box {
            width: 270px;
            height: 310px;
            overflow: hidden;
            > img {
              width: 100%;
              display: block;
              transition: transform 0.3s ease; /* 平滑的变换效果 */
              transform: scale(1);
            }
            > img:hover {
              transform: scale(1.1); /* 鼠标划过时放大1.1倍 */
            }
          }

          p {
            margin-top: 40px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #000f2f;
            line-height: 32px;
            text-align: left;
            font-style: normal;
            padding-right: 30px;
          }
        }
      }
    }
  }
}

.layout {
  width: 1400px;
  margin: 0 auto;
}
.swiper {
  max-width: 600px;
  width: 600px;
  height: 100%;
  position: relative;
  .swiper-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .swiper-slide {
      width: 100%;
      height: 100%;
      overflow: hidden;
      img {
        width: 100%;
        height: auto;
        // height: 100%;
        display: block;
        // top: 50%;
        // left: 50%;
        // transform: (-50%, -50%);
        // width: 200%;
        // height: 200%;
        // object-fit: none;
        //  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
    }
  }
  :deep(.swiper) {
    position: relative !important;
  }
  :deep(.swiper-button-prev) {
    width: 80px !important;
    height: 80px !important;
    background: rgba(0, 0, 0, 0.9);
  }
  :deep(.swiper-button-next) {
    width: 80px !important;
    height: 80px !important;
    background: rgba(0, 0, 0, 0.9);
  }
  :deep(.swiper-button-prev) {
    top: auto !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 99999;
  }

  :deep(.swiper-button-next) {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99999;
  }

  :deep(.swiper-button-prev::after) {
    color: #fff !important;
  }
  :deep(.swiper-button-next::after) {
    color: #fff !important;
  }
}
</style>
